<template>
  <collapsable-card
    :title="$t('app.general.title.system_overview')"
    icon="$desktopTower">

    <v-row no-gutters>
      <v-col>
        <v-simple-table dense>
          <tbody>
            <tr>
              <th>{{ $t('app.system_info.label.hostname') }}</th>
              <td>{{ printerInfo.hostname }}</td>
            </tr>
            <tr>
              <th>{{ $t('app.system_info.label.model') }}</th>
              <td>{{ cpuInfo.model }}</td>
            </tr>
            <tr>
              <th>{{ $t('app.system_info.label.cpu_desc') }}</th>
              <td>{{ cpuInfo.cpu_desc }}</td>
            </tr>
            <tr v-if="cpuInfo.total_memory">
              <th>{{ $t('app.system_info.label.total_memory') }}</th>
              <td>{{ this.$filters.getReadableFileSizeString(cpuInfo.total_memory * 1000) }}</td>
            </tr>
            <tr>
              <th>{{ $t('app.system_info.label.hardware_desc') }}</th>
              <td>{{ cpuInfo.hardware_desc }}</td>
            </tr>
            <tr>
              <th>{{ $t('app.system_info.label.processor_desc') }}</th>
              <td>{{ cpuInfo.bits }} {{ cpuInfo.processor }} with {{ cpuInfo.cpu_count }} cores</td>
            </tr>
            <tr>
              <th>{{ $t('app.system_info.label.distribution_name') }}</th>
              <td>{{ distribution.name }}</td>
            </tr>
            <tr>
              <th>{{ $t('app.system_info.label.distribution_codename') }}</th>
              <td>{{ distribution.codename }}</td>
            </tr>
            <tr>
              <th>{{ $t('app.system_info.label.distribution_like') }}</th>
              <td>{{ distribution.like }}</td>
            </tr>
            <tr v-for="mcu in mcus" :key="mcu.name">
              <th>{{ mcu.name }}</th>
              <td>{{ mcu.mcu_version }}</td>
            </tr>
          </tbody>
        </v-simple-table>
      </v-col>
      <v-col>
        <v-card-text>
          <app-btn block color="info" @click="reload()" class="me-2 mb-8">
            {{ $t('app.general.btn.socket_refresh') }}
          </app-btn>

          <system-control></system-control>

          <app-btn block color="warning" @click="restartServiceMoonraker()" class="me-2 mb-2 mt-8" :disabled="printerPrinting">
            {{ $t('app.general.btn.restart_service_moonraker') }}
          </app-btn>
          <app-btn block color="warning" @click="restartServiceKlipper()" class="me-2 mb-2" :disabled="printerPrinting">
            {{ $t('app.general.btn.restart_service_klipper') }}
          </app-btn>

          <app-btn block color="primary" @click="serviceRestartMoonraker()" class="me-2 mb-2 mt-8">
            {{ $t('app.general.btn.reboot') }}
          </app-btn>
          <app-btn block color="primary" @click="serviceRestartKlipper()" class="me-2 mb-2">
            {{ $t('app.general.btn.shutdown') }}
          </app-btn>
        </v-card-text>
      </v-col>
    </v-row>

    <!-- <pre>{{ services }}</pre> -->
    <!-- <pre>{{ sdInfo }}</pre> -->
    <!-- <pre>{{ distribution }}</pre> -->
    <!-- <pre>{{ printerInfo }}</pre> -->

  </collapsable-card>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import StateMixin from '@/mixins/state'
import ServicesMixin from '@/mixins/services'

@Component({})
export default class PrinterStatsCard extends Mixins(StateMixin, ServicesMixin) {
  get mcus () {
    return this.$store.getters['printer/getMcus']
  }

  get cpuInfo () {
    const info = this.$store.getters['server/getSystemInfo']
    return info?.cpu_info || {}
  }

  get sdInfo () {
    const info = this.$store.getters['server/getSystemInfo']
    return info?.sd_info || {}
  }

  get distribution () {
    const info = this.$store.getters['server/getSystemInfo']
    return info?.distribution || {}
  }

  get services () {
    const info = this.$store.getters['server/getSystemInfo']
    return info?.available_services || []
  }

  get printerInfo () {
    return this.$store.state.printer.printer.info
  }

  get fileSystemUsedPercent () {
    // (250 / 500) * 100
    const total = this.fileSystemUsage.total
    const used = this.fileSystemUsage.used
    return Math.floor((used / total) * 100).toFixed()
  }

  get fileSystemUsage () {
    return this.$store.getters['files/getUsage']
  }

  reload () {
    window.location.reload()
  }

  reboot () {
    console.log('reboot')
    this.$confirm(
      this.$tc('app.general.simple_form.msg.confirm_reboot_host'),
      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
    )
      .then(res => {
        if (res) {
          this.$emit('click')
          this.hostReboot()
        }
      })
  }

  shutdown () {
    console.log('shutdown')
    this.$confirm(
      this.$tc('app.general.simple_form.msg.confirm_shutdown_host'),
      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
    )
      .then(res => {
        if (res) {
          this.$emit('click')
          this.hostShutdown()
        }
      })
  }
}
</script>
<style lang="scss" scoped>
table th{
  width: 100px;
}
</style>
